<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<div class="child">child</div>
			<div id="style" style="width: 88px;height: 66px;background-color: #00FFFF;">
				test style
			</div>
		</div>
		
	</body>
	<script>
	window.onload = function(){
		/**
		 * offsetParent:返回该元素有定位的父级，如果父级都没有定位则返回body
		 * 
		 * offsetTop:返回元素相对父级（带有定位的父级）上方的偏移
		 * offsetLeft:返回元素相对父级（带有定位的父级）左边框的偏移
		 * offsetWidth:返回自身的宽度，包括padding、border、内容区，返回数值不带单位
		 * offsetHeight:返回自身的高度，包括padding、border、内容区，返回数值不带单位
		 * 
		 * style.width 只能获取行内样式的数据，返回有单位，能用js修改数值
		 * offsetWidth只能读不能改，返回无单位
		 * */
		var parent = document.querySelector(".parent");
		console.log("parentNode:",parent.parentNode);
		var child = document.querySelector(".child");
		console.log("offsetParent:", child.offsetParent);
		console.log("offsetTop:", child.offsetTop);
		console.log("offsetLeft:", child.offsetLeft);
		console.log("offsetWidth:", child.offsetWidth);
		console.log("offsetHeight:", child.offsetHeight);
		
		console.log("--------------------------------");
		var style = document.querySelector("#style");
		console.log("offsetWidth:",style.offsetWidth);
		console.log("style.width:",style.style.width);
		style.style.width = 111+"px";//这句生效，注意加单位
		console.log(style.style.width);
		style.offsetWidth = 222+"px";//这句不生效
		console.log(style.offsetWidth);
	}
	</script>

	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.parent {
			position: relative;
			display: inline-block;
			width: 200px;
			height: 200px;
			margin: 50px;
			background-color: #008000;
		}

		.child {
			display: inline-block;
			position: absolute;
			width: 50px;
			height: 50px;
			margin: 10px;
			border: 5px solid yellow;
			background-color: red;
		}
		#style{
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</html>
